<template>
  <div style="padding: 30px; max-width: 1200px; margin: 0 auto;">
    <!-- 标题区域 -->
    <div style="text-align: center; margin-bottom: 40px;">
      <h2 style="color: #409EFF; font-size: 2rem; margin-bottom: 10px; font-weight: 600; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
        法律条文查询
      </h2>
      <p style="color: #606266; font-size: 1.1rem;">快速查找您需要的法律条文信息</p>
    </div>
    
    <!-- 搜索区域 -->
    <el-card shadow="hover" style="margin-bottom: 30px; background: rgba(255, 255, 255, 0.95);">
      <div style="padding: 20px;">
        <el-form @submit.prevent="searchLaw">
          <el-form-item>
            <el-input 
              v-model="keyword" 
              placeholder="请输入法律条文关键字，例如：合同法、刑法、劳动法、婚姻法、民法典等..."
              size="large"
              style="width: 100%;"
            >
              <template #append>
                <el-button 
                  type="primary" 
                  @click="searchLaw" 
                  :loading="loading"
                  icon="Search"
                  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;"
                >
                  查询
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 常见法律条文展示 -->
    <el-card shadow="hover" style="margin-bottom: 30px; background: rgba(255, 255, 255, 0.95);">
      <div style="padding: 20px;">
        <h3 style="color: #409EFF; margin-bottom: 20px; font-size: 1.3rem; display: flex; align-items: center;">
          <el-icon style="margin-right: 8px;"><Star /></el-icon>
          常见法律条文
        </h3>
        
        <el-row :gutter="20">
          <el-col :span="8" v-for="(law, index) in commonLaws" :key="index" style="margin-bottom: 20px;">
            <el-card shadow="hover" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; cursor: pointer; height: 120px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;" @click="selectCommonLaw(law)">
              <div style="text-align: center;">
                <h4 style="margin: 0 0 8px 0; font-size: 1.1rem;">{{ law.name }}</h4>
                <p style="margin: 0; opacity: 0.9; font-size: 0.9rem;">{{ law.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 查询结果 -->
    <div v-if="results.length" style="margin-top: 20px;">
      <el-card shadow="hover" style="background: rgba(255, 255, 255, 0.95);">
        <div style="padding: 20px;">
          <h3 style="color: #67C23A; margin-bottom: 20px; font-size: 1.3rem; display: flex; align-items: center;">
            <el-icon style="margin-right: 8px;"><SuccessFilled /></el-icon>
            查询结果 (共 {{ results.length }} 条)
          </h3>
          
          <el-table 
            :data="results" 
            stripe 
            style="width: 100%"
            empty-text="未找到相关法律条文"
          >
            <el-table-column 
              prop="law" 
              label="法律名称" 
              width="150"
              sortable
            />
            <el-table-column 
              prop="article" 
              label="条文编号" 
              width="120"
              sortable
            />
            <el-table-column 
              prop="title" 
              label="条文标题" 
              width="200"
            />
            <el-table-column 
              prop="content" 
              label="条文内容" 
              min-width="300"
            />
          </el-table>
        </div>
      </el-card>
    </div>

    <div v-else-if="loading" style="text-align: center; margin-top: 30px;">
      <el-icon size="40" class="is-loading" style="color: #409EFF;"><Loading /></el-icon>
      <p style="margin-top: 15px; color: #606266; font-size: 1.1rem;">正在查询法律条文，请稍候...</p>
    </div>

    <div v-else-if="searched && !results.length" style="text-align: center; margin-top: 30px;">
      <el-empty description="未找到相关法律条文" image-size="200">
        <p style="color: #909399; margin-top: 10px;">请尝试使用其他关键词进行搜索</p>
      </el-empty>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Loading, Star, SuccessFilled } from '@element-plus/icons-vue'

const keyword = ref('')
const results = ref([])
const loading = ref(false)
const searched = ref(false)

// 常见法律条文数据
const commonLaws = ref([
  {
    name: '民法典',
    description: '民事法律关系的基本法律',
    keyword: '民法典'
  },
  {
    name: '刑法',
    description: '刑事犯罪与刑罚的法律',
    keyword: '刑法'
  },
  {
    name: '劳动合同法',
    description: '劳动关系与劳动合同的法律',
    keyword: '劳动合同法'
  },
  {
    name: '婚姻法',
    description: '婚姻家庭关系的法律',
    keyword: '婚姻法'
  },
  {
    name: '消费者权益保护法',
    description: '保护消费者权益的法律',
    keyword: '消费者权益保护法'
  },
  {
    name: '道路交通安全法',
    description: '道路交通管理的法律',
    keyword: '道路交通安全法'
  }
])

// 选择常见法律
function selectCommonLaw(law) {
  keyword.value = law.keyword
  searchLaw()
}

function searchLaw() {
  if (!keyword.value.trim()) {
    ElMessage.warning('请输入查询关键字')
    return
  }

  loading.value = true
  results.value = []
  searched.value = true

  // 模拟API调用延迟
  setTimeout(() => {
    // 这里可以接入后台 API
    const mockData = [
      {
        law: '民法典',
        article: '第一千零七十九条',
        title: '离婚诉讼',
        content: `夫妻一方要求离婚的，可以由有关组织进行调解或者直接向人民法院提起离婚诉讼。人民法院审理离婚案件，应当进行调解；如果感情确已破裂，调解无效的，应当准予离婚。`
      },
      {
        law: '民法典',
        article: '第一千零四十六条',
        title: '结婚自愿原则',
        content: `结婚应当男女双方完全自愿，禁止任何一方对另一方加以强迫，禁止任何组织或者个人加以干涉。`
      },
      {
        law: '民法典',
        article: '第一千一百二十七条',
        title: '法定继承顺序',
        content: `遗产按照下列顺序继承：（一）第一顺序：配偶、子女、父母；（二）第二顺序：兄弟姐妹、祖父母、外祖父母。`
      },
      {
        law: '刑法',
        article: '第二百六十四条',
        title: '盗窃罪',
        content: `盗窃公私财物，数额较大的，或者多次盗窃、入户盗窃、携带凶器盗窃、扒窃的，处三年以下有期徒刑、拘役或者管制，并处或者单处罚金；数额巨大或者有其他严重情节的，处三年以上十年以下有期徒刑，并处罚金；`
      },
      {
        law: '刑法',
        article: '第二百三十二条',
        title: '故意杀人罪',
        content: `故意杀人的，处死刑、无期徒刑或者十年以上有期徒刑；情节较轻的，处三年以上十年以下有期徒刑。`
      },
      {
        law: '劳动合同法',
        article: '第三十八条',
        title: '劳动者单方解除',
        content: `用人单位有下列情形之一的，劳动者可以解除劳动合同：（一）未按照劳动合同约定提供劳动保护或者劳动条件的；（二）未及时足额支付劳动报酬的；（三）未依法为劳动者缴纳社会保险费的；`
      },
      {
        law: '劳动合同法',
        article: '第八十二条',
        title: '未签订劳动合同的处罚',
        content: `用人单位自用工之日起超过一个月不满一年未与劳动者订立书面劳动合同的，应当向劳动者每月支付二倍的工资。`
      },
      {
        law: '婚姻法',
        article: '第三十二条',
        title: '离婚条件',
        content: `男女一方要求离婚的，可由有关部门进行调解或直接向人民法院提出离婚诉讼。人民法院审理离婚案件，应当进行调解；如感情确已破裂，调解无效，应准予离婚。`
      },
      {
        law: '消费者权益保护法',
        article: '第五十五条',
        title: '欺诈行为的赔偿',
        content: `经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或者接受服务的费用的三倍；增加赔偿的金额不足五百元的，为五百元。`
      },
      {
        law: '道路交通安全法',
        article: '第九十一条',
        title: '酒后驾驶处罚',
        content: `饮酒后驾驶机动车的，处暂扣六个月机动车驾驶证，并处一千元以上二千元以下罚款。因饮酒后驾驶机动车被处罚，再次饮酒后驾驶机动车的，处十日以下拘留，并处一千元以上二千元以下罚款，吊销机动车驾驶证。`
      }
    ]

    // 过滤包含关键字的结果
    results.value = mockData.filter(item => 
      item.law.includes(keyword.value) || 
      item.title.includes(keyword.value) || 
      item.content.includes(keyword.value)
    )

    loading.value = false
  }, 1500)
}
</script>

<style scoped>
.el-table :deep(.cell) {
  line-height: 1.6;
}

/* 常见法律卡片悬停效果 */
.el-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 搜索按钮悬停效果 */
.el-button:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
  transform: translateY(-1px);
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table :deep(th) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  font-weight: 600;
}

.el-table :deep(tr:hover > td) {
  background-color: #f0f4ff !important;
}
</style>
